<template>
  <div class="rec">
    <div class="rec-div">
      <div class="rec-normal" v-for="(item,index) in dataList" :key="item.id" @click="getClickId(index)">
        <p><img :src="item.imgUrl" alt="" /></p>
        <p>{{ item.name }}</p>
        <div style="width:170px;display: flex; justify-content: space-between;padding-right:30px">
          <p style="color: orange">{{ item.price | setPrice }}</p>
          <p style="width:50px;border:1px solid #999;text-align:center;border-radius: 5px;">看相似</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          name: "小米11ULtra，开启影像新时代",
          imgUrl:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cea1ff3517387569b7f59fc2b7d01d30.png",
          price: 5999,
        },
        {
          id: 2,
          name: "智能定时|用电统计|过载保护",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1556521908.27222306.jpg",
          price: 49,
        },
        {
          id: 3,
          name: "小身材也有大智慧",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1593339346.09992308.jpg",
          price: 49,
        },
        {
          id: 4,
          name: "Redmi Note 9 4G,6000mAh大电量,...",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1606289221.80685857.jpg",
          price: 999,
        },
        {
          id: 5,
          name: "青年“无须”新选择",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1584692875.5955242.jpg",
          price: 99,
        },
        {
          id: 6,
          name: "全面屏更多可能",
          imgUrl: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205240036_9a8fbf274c0d419c5a0a49ef67cdd7c8.png",
          price: 229,
        },
        {
          id: 7,
          name: "5号彩虹电池（10粒），无汞无镉，安...",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/T1rpVjBvEv1RXrhCrK.jpg",
          price: 9.9,
        },
        {
          id: 8,
          name: "小米插线板5孔位，过载断电保护，独立安...",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f59621b9178056b3dbc1c375567ab8f4.jpg",
          price: 39,
        },
        {
          id: 9,
          name: "支持蓝牙5.0，自动秒连，拿起就能用",
          imgUrl: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241526_03b4bf93894a1297a7f1c74d46446fac.png",
          price: 99,
        },
        {
          id: 10,
          name: "简约设计，丝滑书写",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1560158394.03015626.jpg",
          price: 24.9,
        },
        {
          id: 11,
          name: "其他1",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1636019380.55072114.jpg",
          price: 49,
        },
        {
          id: 12,
          name: "其他2",
          imgUrl: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1607063604.46323457.jpg",
          price: 9.99,
        },
      ],
    };
  },
  methods:{
    getClickId(index){
      let data = this.dataList[index].name
      this.$emit("sendData",data);
    }
  },
  filters: {
    setPrice(val) {
      return "￥" + val;
    },
  },
};
</script>

<style scoped lang="scss">
.rec {
  width: 400px;
}
.rec-div {
  width: 360px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 10px;
}
.rec-normal {
  width: 175px;
  background-color: white;
  border-radius: 5px;
  margin-top: 10px;
  p {
    text-align: left;
    font-size: 10px;
    width: 120px;
    margin: auto;
    font-weight: bold;
    &:first-child {
      text-align: center;
      margin: 0;
    }
    img {
      widows: 160px;
      height: 170px;
    }
  }
}
</style>